<template>
  <div>
      <h2>动态组件示例</h2>
      <p>
        点击按钮加载远程组件，然后点击改变内容按钮，组件会自动更新。
      </p>
    <button @click="showRemoteComponent">加载远程组件</button>
    <button @click="changeContent">改变内容</button>

    <RemoteComponent
      ref="remoteComp"
      v-model:show="showRemoteChild"
      :sfc-content="sfcContent"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import RemoteComponent from '@/views/aicode/component/DynamicComponent.vue';
import request from "@/utils/request";
import blogVue from '@/views/aicode/component/11.vue?raw';


const showRemoteChild = ref(false);
const remoteComp = ref(null);
const sfcContent = ref(`
    <template>
      Hello World44 !
    </template>
  `);

onMounted(async () => {
  sfcContent.value = blogVue
  // request.get('http://localhost/src/views/aicode/component/11.vue').then(res => {
  //   sfcContent.value = res
  // })
});

const showRemoteComponent = () => {
  showRemoteChild.value = true;
};

const changeContent = () => {
  // 方法1: 直接更新sfcContent，组件会自动响应
  sfcContent.value = `
    <template>
      Hello World3333 !
    </template>
  `;

  // 方法2: 调用子组件暴露的transform方法
  remoteComp.value?.transform();
};
</script>
